<template>
	<div class="view">
		<!-- order -->
		<div @click="tabHandle(0)">
			<i class="Icon">fastfood</i>
		</div>
		<!-- home -->
		<div style="width: 40px;height: 40px;border-radius: 20px;background-color: #74eb41;
		box-shadow: 0 0 5px #74eb41;
		display: flex;align-items: center;justify-content: center;" @click="tabHandle(1)">
			<i class="Icon" style="color: #FFFFFF;">home</i>
		</div>
		<!-- mine -->
		<div @click="tabHandle(2)">
			<i class="Icon">person</i>
		</div>
	</div>
</template>

<script>
	export default {
		name:"bottom-bar",
		data() {
			return {
				
			};
		},
		methods:{
			tabHandle(idx){
				this.$emit("tabHandle",idx);
			}
		}
	}
</script>

<style scoped>
	.view {
		display: flex;
		align-items: center;
		justify-content: space-around;
	}
</style>
